<template>
  <div class="rotation" @mouseleave="() => (showMtm = false)">
    <div class="columns">
      <div class="c-nav" v-for="item in Nav">
        <div class="c-top">
          <img v-lazy="item.img" alt="" />
          <div class="c-title">
            {{ item.title }}
          </div>
        </div>

        <div class="c-content">
          <span v-for="(items, index) in item.content" :key="index"
            ><span
              class="content-tag thumb"
              @mouseenter="() => clickTag(item.tagList, item.title,item.type)"
              :title="items.title"
              >{{ items.title }}</span
            ><span class="" v-show="index !== item.content.length - 1">
              /
            </span></span
          >
        </div>
      </div>
    </div>
    <div class="mtm" v-show="showMtm" >
      <Mtm  style="background: white;" :title="mtmData.title" :type="mtmData.type" :left="mtmData.left" :right="mtmData.right" />
    </div>

    <div class="mtm" v-show="!showMtm" >
    <div class="banner-box" >
      <HomeSwiper
      class="banner"
        :imgs="[
          publicUrl('/images/banner1.jpg'),
          publicUrl('/images/attract-shop.jpg'),
          publicUrl('/images/banner3.jpg'),
        ]"
      />
    </div>
    <div class="login" >
      <div :class="['l-top', globalStore.is_login ? `is-login` : ``]">
        <div class="l-img">
          <img
            v-lazy="
              publicUrl(
                globalStore.is_login
                  ? globalStore.userInfo.avatar
                  : `/images/user.png`
              )
            "
            alt=""
          />
        </div>
        <div class="l-title"><p>Hi~欢迎来到云裁</p></div>
        <div class="l-btn" v-show="globalStore.is_login === false">
          <router-link class="roter-link l-login thumb" :to="`/login`"
            >一键登录</router-link
          >
          <router-link class="l-r thumb" :to="`/register`">注册</router-link>
        </div>
        <div class="l-btns" v-show="globalStore.is_login === true">
          <div class="l-btns-part">
            <div class="number overOne">
              {{ globalStore.userInfo.toBePaidNum }}
            </div>

            <div class="title">待付款</div>
          </div>
          <div class="l-btns-part">
            <div class="number">{{ globalStore.userInfo.pendingOrderNum }}</div>

            <div class="title">待接单</div>
          </div>
          <div class="l-btns-part">
            <div class="number">{{ globalStore.userInfo.inProductionNum }}</div>

            <div class="title">生产中</div>
          </div>
          <div class="l-btns-part">
            <div class="number">{{ globalStore.userInfo.goodsNum }}</div>

            <div class="title">待发货</div>
          </div>
        </div>
      </div>
      <div class="l-new">
        <div @click="()=>go('/news/index')"  class="n-top">
          <div class="news">云裁快报</div>
          <div class="more">
            <p class="thumb">更多</p>
            <img v-lazy="publicUrl(`/images/icon6.png`)" alt="" />
          </div>
        </div>
        <div class="n-content thumb" v-for="item in News" :title="item.tag" @click="()=>go('/news/detail')">
          <div class="n-title">
            <img v-lazy="item.img" alt="" />
            <span>{{ item.title }}</span>
          </div>
          <div class="tag">{{ item.tag }}</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import { useRouter } from "vue-router";
import HomeSwiper from "@/components/HomeSwiper/index.vue";
import { GlobalStore } from "@/stores/index";
import Mtm from "./components/Mtm/index.vue";
import mittBus from "@/utils/mittBus";

const globalStore = GlobalStore();


interface News {
  img: string;
  title: string;
  tag: string;
}
const News = ref<Array<News>>([
  {
    img: publicUrl("/images/icon5.png"),
    title: "通知",
    tag: "毛衣+直筒裤，才是真正的冬直筒裤，才是真正的冬...",
  },
  {
    img: publicUrl("/images/icon5.png"),
    title: "最新",
    tag: "毛衣+直筒裤，才是真正的冬...",
  },
  {
    img: publicUrl("/images/icon5.png"),
    title: "热搜",
    tag: "毛衣+直筒裤，才是真正的冬...",
  },
  {
    img: publicUrl("/images/icon5.png"),
    title: "热搜",
    tag: "毛衣+直筒裤，才是真正的冬...",
  },
]);
interface NavSon {
  className: string;
  tagList: Array<{ title: string; tag_id: number }>;
}

const router = useRouter();

interface Nav {
  img: string;
  title: string;
  type: 'mtm'|'spot'|'fabric'
  tagList: Array<NavSon>;
  content: Array<{ title: string }>;
}
const mtmData = ref<{
  title: string;
  type:'mtm'|'spot'|'fabric';
  left: {
    className: string;
    tagList: Array<{ title: string; tag_id: number }>;
  };
  right: {
    className: string;
    tagList: Array<{ title: string; tag_id: number }>;
  };
}>({
  title: "",
  type:'mtm',
  left: {
    className: "",
    tagList: [],
  },
  right: {
    className: "",
    tagList: [],
  },
});
const showMtm = ref<boolean>(false);

// const modules = ref<Array<any>>([Pagination,Navigation]);
const Nav = ref<Array<Nav>>([
  {
    img: publicUrl("/images/icon1.png"),
    title: "MTM定制",
    type:'mtm',
    tagList:[
          {
            className: "男装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
          {
            className: "女装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
        ],
    content: [
      {
        title: `衬衫`,
      },
      {
        title: `西服`,
      },
      {
        title: `休闲裤`,
      },
      {
        title: `牛仔裤`
      },
      {
        title: `外套`,
      },
    ],
  },
  {
    img: publicUrl("/images/icon2.png"),
    title: "现货产品",
    type:'spot',
    tagList:[
          {
            className: "男装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
          {
            className: "女装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
        ],
    content: [
      {
        title: `衬衫`,

      },
      {
        title: `西服`,

      },
      {
        title: `休闲裤`,

      },
      {
        title: `牛仔裤`,

      },
      {
        title: `外套`,

      },
    ],
  },
  {
    img: publicUrl("/images/icon3.png"),
    title: "面料商城",
    type:'fabric',
    tagList:[
          {
            className: "男装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
          {
            className: "女装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
        ],
    content: [
      {
        title: `针织羊毛`,

      },
      {
        title: `毛织`,
      },
      {
        title: `进口米面料`,

      },
      {
        title: `国产面料`,

      },
      {
        title: `衬衫面料`,
      }
    ],
  },
  {
    img: publicUrl("/images/icon4.png"),
    title: "辅料供应",
    type:'spot',
    tagList:[
          {
            className: "男装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
          {
            className: "女装",
            tagList: [
              { title: `男衬衫长袖`, tag_id: 1 },
              { title: `男衬衫短袖`, tag_id: 2 },
              { title: `男衬衫短袖`, tag_id: 3 },
              { title: `男衬衫短袖`, tag_id: 4 },
              { title: `男衬休闲裤子`, tag_id: 5 },
              { title: `男衬牛仔裤`, tag_id: 6 },
              { title: `男士单西`, tag_id: 7 },
              { title: `男士西装套餐`, tag_id: 8 },
              { title: `时尚牛仔裤`, tag_id: 9 },
              { title: `男衬衫短袖`, tag_id: 10 },
              { title: `男polo衫长袖`, tag_id: 11 },
              { title: `西服3件套`, tag_id: 12 },
              { title: `男衬休闲裤子`, tag_id: 13 },
              { title: `时尚牛仔裤`, tag_id: 14 },
              { title: `男衬衫短袖`, tag_id: 15 },
              { title: `男polo衫长袖`, tag_id: 16 },
              { title: `西服3件套`, tag_id: 17 },
              { title: `男衬休闲裤子`, tag_id: 18 },
            ],
          },
        ],
    content: [
      {
        title: `纽扣`,

      },
      {
        title: `刺绣`,

      },
      {
        title: `胸带巾`,
      },
      {
        title: `胸章`,

      },
      {
        title: `国产面料`,

      },
      {
        title: `衬衫面料`,

      },
    ],
  },
]);

interface Img {
  img: string;
}

const Img = ref<Array<any>>([
  { img: publicUrl("/images/banner1.jpg") },
  { img: publicUrl("/images/banner1.jpg") },
  { img: publicUrl("/images/banner1.jpg") },
]);
const go = (path:string)=>{
  router.push(path)
  mittBus.emit('routerChange',path)
}



const clickTag = (navSon: NavSon[], title: string,type:'mtm'|'spot'|'fabric') => {
  mtmData.value = {
    title: title,
    type:type,
    left: navSon[0]
      ? navSon[0]
      : {
          className: "暂无",
          tagList: [],
        },
    right: navSon[1]
      ? navSon[1]
      : {
          className: "暂无",
          tagList: [],
        },
  };
  showMtm.value = true;
};
</script>

<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
